<template>
	<view class="sys-setting-bg">
		<view class="device-settings-title">接口IP设置</view>
		<view class="popup-content-bg">
			<view class="input-hint-txt">接口IP</view>
			<input placeholder="请输入" v-model="serverIp" @input="ipInput" />
			<view class="input-hint-txt">接口端口</view>
			<input placeholder="请输入" v-model="serverPort" type="number" />
			<view class="btn-bg">
				<view class="btn-confirm-bg" @click="saveHttpIp">保存</view>
				<view class="btn-cancel-bg">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import localStore from '@/common/localStore.js'
	export default {
		name: "robotNetworkFun",
		data() {
			return {
				timer: null,

				serverIp: "",
				serverPort: 0
			};
		},
		mounted() {
			this.serverIp = localStore.getHttpIp()
			this.serverPort = localStore.getHttpPort()
		},
		methods: {
			ipInput(e) {
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					if (!this.isValidIP(this.serverIp)) {
						uni.showToast({
							title: "请输入有效IP"
						})
					}
				}, 1000);
			},

			isValidIP(ip) {
				// 基本格式检查
				if (typeof ip !== 'string') return false;

				// 分割IP地址为四部分
				const parts = ip.split('.');

				// 检查是否为四部分
				if (parts.length !== 4) return false;

				// 检查每个部分
				for (let i = 0; i < parts.length; i++) {
					const part = parts[i];

					// 检查是否为空
					if (part === '') return false;

					// 检查是否为纯数字
					if (!/^\d+$/.test(part)) return false;

					// 检查前导零
					if (part.length > 1 && part[0] === '0') return false;

					// 转换为数字并检查范围
					const num = parseInt(part, 10);
					if (isNaN(num) || num < 0 || num > 255) return false;
				}

				return true;
			},

			saveHttpIp() {
				if (!this.isValidIP(this.serverIp)) {
					uni.showToast({
						title: "请输入有效IP"
					})
					return
				}
				if (this.serverPort == 0) {
					uni.showToast({
						title: "请输入有效端口"
					})
					return
				}
				localStore.saveHttpIp(this.serverIp)
				localStore.saveHttpPort(this.serverPort)
				let httpUrl = "http://" + this.serverIp + ":" + this.serverPort
				localStore.saveHttpRequestUrl(httpUrl)
				this.$emit("notifyIndexCustomHeadGetLogoImg")

				uni.showToast({
					title: "保存成功"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.sys-setting-bg {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #1e40af;
		padding-top: 100rpx;
	}

	.device-settings-title {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 40rpx;
		margin-bottom: 40rpx;
		font-weight: 600;
		text-align: center;
		color: #fff;
	}

	.popup-content-bg {
		background-color: #1e3a8a;
		padding: 30rpx;
		border-radius: 8px;
		width: 600rpx;

		.content-title {
			color: #FFFFFF;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}

		.input-hint-txt {
			font-size: 28rpx;
			color: #FFFFFF;
			margin-bottom: 20rpx;
		}

		.btn-bg {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
		}

		.btn-confirm-bg {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			padding: 20rpx 0;
			background-color: rgba(59, 130, 246, 1);
			font-size: 28rpx;
			color: #FFFFFF;
			margin-right: 20rpx;
			border-radius: 16rpx;
		}

		.btn-cancel-bg {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			padding: 20rpx 0;
			background-color: rgba(30, 64, 175, 1);
			font-size: 28rpx;
			color: #FFFFFF;
			margin-left: 20rpx;
			border-radius: 16rpx;
			border: 2rpx solid rgba(37, 99, 235, 1);
		}
	}

	input {
		/* width: 100%; */
		flex: 1;
		padding: 10px;
		border: 1px solid #1e40af;
		border-radius: 6px;
		font-size: 16px;
		background-color: #1e40af;
		color: #FFFFFF;
		margin-bottom: 20rpx;
	}
</style>